import React, {Component}      from 'react';
import {
    StyleSheet,
    View,
    Dimensions,
    TextInput,
    Text,
    TouchableOpacity
} from 'react-native';
import BaseNavigationBar         from '../../views/BaseNavigationBar';
import ListItemDivider           from '../../views/ListItemDivider.js';
import  LinearGradient           from 'react-native-linear-gradient';
import Toast, {DURATION}         from 'react-native-easy-toast';
import LoadingView               from '../../views/LoadingView';
import Utils                     from '../../utils/utils';
const {width} = Dimensions.get('window');

export default class CertificationScreen extends Component {

    popToBack(){
        this.props.navigation.goBack()
    }

    constructor(props) {
        super(props);
        this.state = {
            name:'',
            IDNumber:'',
            showProgress: false,
        };
    }

    // 政策
    goPolicyDetail(){
        this.props.navigation.navigate("Policy")
    }

    // 提交数据
    goSubmitData(){
        var nameStr = this.state.name;
        var IDNumberStr = this.state.IDNumber;
        if (!nameStr.length) {
            this.refs.toast.show('真实姓名不能为空');
            return false;
        }else if (!IDNumberStr.length) {
            this.refs.toast.show('身份证号码不能为空');
            return false;
        } else if (Utils.isAvailableIDNumber(IDNumberStr).status === 0) {
            this.refs.toast.show('身份证号码输入不合规');
            return false;
        }else {

        }
    }

    render() {
        return (
            <View style={styles.container}>
                <BaseNavigationBar
                    title={'实名认证'}
                    leftImageSource={require('../../../images/other/ic_back.png')}
                    leftItemFunc={() => this.popToBack()}/>

                {/*真实姓名*/}
                <View style={styles.titleViewStyle}>
                    <Text style={styles.titleStyle}>真实姓名</Text>
                    <TextInput
                        multiline={false}
                        placeholder='请输入您的真实姓名'
                        style={styles.detailStyle}
                        underlineColorAndroid="transparent"
                        onChangeText={(text) => {
                            this.setState({name: text.trim()})
                        }} />
                </View>

                <ListItemDivider/>
                {/*身份证号码*/}
                <View style={styles.titleViewStyle}>
                    <Text style={styles.titleStyle}>身份证号码</Text>
                    <TextInput
                        multiline={false}
                        placeholder='请输入您的身份证号码'
                        style={styles.detailStyle}
                        underlineColorAndroid="transparent"
                        onChangeText={(text) => {
                            this.setState({IDNumber: text.trim()})
                        }} />
                </View>
                <Text numberOfLines={10} style={styles.tipStyle}>     根据2010年8月1日起实施的网络游戏管理暂行办法,网络游戏用户需使用有效身份证进行实名注册,
                    为保证流畅游戏体验,享受健康游戏生活,请广大游戏玩家尽快实名注册。</Text>

                <TouchableOpacity activeOpacity={1} onPress={this.goSubmitData.bind(this)}>
                    <LinearGradient colors={['#fe7133','#ff4114']} style={styles.linearGradient}>
                        <Text style={{color:'#fdfdfd',fontSize:14}}>确认保存</Text>
                    </LinearGradient>
                </TouchableOpacity>


                {/*用户信息和隐私保护政策*/}
                <TouchableOpacity activeOpacity={1} onPress={this.goPolicyDetail.bind(this)}>
                    <View style={styles.policyViewStyle}>
                        <Text style={{color:'#909090',fontSize:11}}>用户信息和隐私保护政策</Text>
                    </View>
                </TouchableOpacity>

                <Toast ref="toast" position='center'/>

                { this.state.showProgress ?
                    (<LoadingView cancel={() => this.setState({showProgress:false})}/>):(null)}

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    titleViewStyle:{
        backgroundColor:'white',
        height:0.56*92,
        width:width,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
    },
    titleStyle:{
        fontSize:15,
        left:0.65*12,
        color:'#353535',
        width:width/3
    },
    detailStyle:{
        flex:1,
        marginLeft:0.65*12,
        fontSize:13,
        color:'#909090'
    },
    tipStyle:{
        fontSize:11,
        color:'#909090',
        margin:10
    },
    policyViewStyle: {
        marginTop:0.56*20,
        justifyContent: 'center',
        alignItems: 'center'
    },
    linearGradient: {
        justifyContent:'center',
        alignItems:'center',
        height:0.56*70,
        marginLeft:0.56*40,
        marginRight:0.56*40,
        marginTop:0.56*100,
        borderRadius:0.56*20
    }
});
